<template>
  <div class="page" id="app">
    <div class="body">
      <div class="block" v-for="(img, index) in bgImg" :key="img.id">
        <div v-if="index === 0" class="coming-txt" v-cloak>
          <div class="swiper-container" id="top-msg">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="item in comingTxt" :key="item.id">
                <p class="p-msg" v-html="decodeData(item)"></p>
              </div>
            </div>
          </div>
        </div>
        <div v-if="index === 2" class="have-join-num">
          <img class="img-have" :src="imgHave" alt>
          <div class="have-join" v-cloak>
            {{ havePeople }}
            <img class="img-people" :src="imgPeople" alt>
          </div>
          <img class="img-join" :src="imgJoin" alt>
        </div>
        <div v-if="index === 3" class="bag">
          <div class="swiper-container" id="gift-bag">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="item in giftBags" :key="item.id">
                <div class="gift-box">
                  <img
                    class="img-bag"
                    :src="item.img_url != '' ? item.img_url : item.img"
                    @click.stop.prevent
                  >
                  <div class="btn-get">
                    <button
                      type="button"
                      class="btn-get-gift"
                      @click.prevent="getGift(item, $event)"
                      :data-id="item.id"
                      :data-name="item.name"
                      :class="{haveGetGift: item.is_own === 1}"
                      :disabled="item.is_own === 1"
                      v-html="item.is_own ? '已领取' : '领取'"
                    ></button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
        <div v-if="index === 4" class="joy-msg">
          <div class="swiper-contationer" id="joy-msg">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="(item, index) in joyTxt"
                :key="item.id"
                v-if="index % 3 === 0"
              >
                <p class="p-msg" v-html="joyTxt[index]"></p>
                <p class="p-msg" v-if="index < joyTxt.length" v-html="joyTxt[index+1]"></p>
                <p class="p-msg" v-if="index < joyTxt.length" v-html="joyTxt[index+2]"></p>
              </div>
            </div>
          </div>
        </div>
        <div v-if="index === 4" class="btn-consult-box">
          <button type="button" class="btn-consult" @click.prevent="consult">护肤咨询</button>
        </div>
        <img class="bgimg" :src="img" @click.stop.prevent>
      </div>
    </div>
    <!-- 礼包弹框 start -->
    <div
      v-if="showDialogGift"
      class="dialog-gift"
      ref="dialogGift"
      @touchmove.stop.prevent
      @whell.stop.prevent
    >
      <div class="bg-dialog" @click.prevent="closeDialog"></div>
      <div class="dialog-box">
        <img :src="imgDialogGift" alt>
        <p class="dialog-tips" v-html="giftTips"></p>
        <a href="javascript:;" @click.prevent="closeDialog"></a>
      </div>
    </div>
    <!-- 礼包弹框 end -->
    <!-- 咨询弹框 start -->
    <div v-if="dialogConsult" class="dialog-gift" @touchmove.stop.prevent @whell.stop.prevent>
      <div class="bg-dialog" @click.prevent="closeDialog"></div>
      <div class="dialog-box dialog-content">
        <img :src="imgRandomConsunt">
        <a class="close" href="javascript:;" @click.prevent="closeDialog"></a>
      </div>
    </div>
  </div>
</template>
<script>
  import 'swiper/dist/css/swiper.min.css'
  import Swiper from 'swiper/dist/js/swiper.min.js'
  import $ from 'zepto/dist/zepto.js'
  // console.log('$', $)
  // rem响应
  document.documentElement.style.fontSize =
    (document.documentElement.clientWidth / 750) * 16 + 'px'
  window.document.title = '变美接力'
  // 背景图片
  var comingTxt = []
  var comingTxt = ['恭喜殷紫萍\ud83d\udc95接力成功！加入变美之旅']
  var joyTxt = []
  var joyTxt = [
    '<span class="joy">恭喜</span><span class="joy-name">殷紫萍\ud83d\udc95</span><span class="joy-gift">已领取变美礼包A</span>'
  ]
  // 领取礼包弹框，有字
  // var imgDialogGift =
  //   'http://sucai.suoluomei.cn/sucai_zs/images/20181130/8a1d66b103ff36fb81e9eb194fc227fd.png'
  // 领取礼包弹框，无字
  var imgDialogGift =
    'http://sucai.suoluomei.cn/sucai_zs/images/20181130/c56e160d40708d83a9a01cd7ba67a33d.png'
  var bgImg = [
    'http://sucai.suoluomei.cn/sucai_zs/images/20181129/d175656fe56731ee22f28c8a8a4d17bf.jpg?x-oss-process=image/quality,Q_70',
    'http://sucai.suoluomei.cn/sucai_zs/images/20181129/ec3dc222d6bde64a7f2273560f3c4abd.jpg?x-oss-process=image/quality,Q_70',
    'http://sucai.suoluomei.cn/sucai_zs/images/20181129/9a933e8b467a90e4420e6c8540ae7eab.jpg?x-oss-process=image/quality,Q_70',
    'http://sucai.suoluomei.cn/sucai_zs/images/20181129/05a87bf369ddb581506ade89ed34704c.jpg?x-oss-process=image/quality,Q_70',
    'http://sucai.suoluomei.cn/sucai_zs/images/20181129/d28c7cf6fd4ad7350c3981ef50195a61.jpg?x-oss-process=image/quality,Q_70'
  ]
  var imgHave =
    'http://sucai.suoluomei.cn/sucai_zs/images/20181130/a574edabcee76917b8b37ba810b5e94e.png?x-oss-process=image/quality,Q_70'
  var imgPeople =
    'http://sucai.suoluomei.cn/sucai_zs/images/20181130/448a582966dcc666597b08d727ef5ea1.png?x-oss-process=image/quality,Q_70'
  var imgJoin =
    'http://sucai.suoluomei.cn/sucai_zs/images/20181130/9060f0e555f53c334f43b0f56da02f88.png?x-oss-process=image/quality,Q_70'
  var imgGiftBag =
    'http://sucai.suoluomei.cn/sucai_zs/images/20181130/7facabc1bf668331b2af391bb450b133.png?x-oss-process=image/quality,Q_70'

  // 礼包B v1 'http://sucai.suoluomei.cn/sucai_zs/images/20181201/f61294f33e2abd786c36ac0f5fd55fa5.png?x-oss-process=image/quality,Q_70'
  var giftBags = [
    {
      img:
        'https://hpl-mianchen.oss-cn-shenzhen.aliyuncs.com/mianchen/20190114/k4KxZaCizY.png?x-oss-process=image/quality,Q_70',
      img_src: ''
    },
    {
      img:
        'https://hpl-mianchen.oss-cn-shenzhen.aliyuncs.com/mianchen/20190114/Xf3HmnnZz2.png?x-oss-process=image/quality,Q_70',
      img_src: ''
    },
    {
      img:
        'http://sucai.suoluomei.cn/sucai_zs/images/20190116/c7a04e150e1103cc14f81fed5eddb348.jpg?x-oss-process=image/quality,Q_70',
      img_src: ''
    }
  ]

  var giftTips = '赶快去找你的专属美肤老师<span></span>咨询吧~'
  var giftTipsNew = '快去公众号输入“变美”咨询护肤老师吧~'
  // 禾葡兰公众号二维码
  var imgConsult = [
    'http://sucai.suoluomei.cn/sucai_zs/images/20181201/70ae51fe17ba7ffb4b97a62ff1608ae3.png?x-oss-process=image/quality,Q_60',
    'http://sucai.suoluomei.cn/sucai_zs/images/20181206/3aefd8458734c627dfd7b7cefc0fdda0.jpg?x-oss-process=image/quality,Q_60'
  ]
  // 和你一起变美
  // var apiList = {
  //   getInitGift: "__CONTROLLER__/getInitGift",
  //   setUserGift: "__CONTROLLER__/setUserGift",
  //   getLogList: "__CONTROLLER__/getLogList"
  // };
  const baseUrl =
    process.env.NODE_ENV === 'production'
      ? 'http://wxtest.suoluomei.com/hpl/index.php?s=/Weixin/Active/'
      : 'api/'
  var apiList = {
    getInitGift: 'getInitGift',
    setUserGift: 'setUserGift',
    getLogList: 'getLogList'
  }

  for (let i in apiList) {
    if (apiList.hasOwnProperty(i)) {
      apiList[i] = baseUrl + apiList[i]
    }
  }
  // console.log('apilist', apiList)

  export default {
    name: 'Gift',
    data() {
      return {
        bgImg,
        comingTxt,
        imgHave,
        imgPeople,
        imgJoin,
        havePeople: 3247,
        imgGiftBag,
        giftBags,
        joyTxt,
        imgDialogGift,
        showDialogGift: false,
        haveTeacher: false,
        hplTeacher: '',
        giftTips,
        haveGetGiftClass: 'haveGetGift',
        dialogConsult: false,
        imgConsult,
        clickSwitchClass: '',
        ossCompress: '?x-oss-process=image/quality,Q_70',
        testField: '',
        plusOneJoin: false
      }
    },
    computed: {
      imgRandomConsunt() {
        var index = Math.floor(Math.random() * this.imgConsult.length)
        return this.imgConsult[index]
      }
    },
    filters: {
      jsonDecode(data) {
        if (typeof data === 'string') {
          return JSON.parse('"' + data + '"')
        }
      }
    },
    created() {
      var _this = this
      // 初始或领取礼包数据
      $.post(
        apiList.getInitGift,
        {},
        function(resp) {
          console.log('​created -> resp', resp)
          if (resp && resp.errcode == 0 && resp.data) {
            var giftList = resp.data.giftList
            if (giftList) {
              for (var i in giftList) {
                Object.assign(_this.giftBags[i - 1], giftList[i])
              }
              _this.$nextTick(function() {})
            }

            console.log('​created -> giftList', giftList)
            // 参加人数
            _this.havePeople = resp.data.totalNum || _this.havePeople
            // 测试unicode昵称
            console.log(resp.data.sepcial)
            if (resp.data.sepcial) {
              _this.testField = resp.data.sepcial
              console.log(_this.testField)
            }
          }
        },
        'json'
      )
      // 轮播数据
      $.post(
        apiList.getLogList,
        {},
        function(resp, textStatus) {
          var logList = resp.data.logList
          if (logList) {
            _this.comingTxt.length = 0
            _this.joyTxt.length = 0
            logList.forEach(function(item, i) {
              var nickname = item.nickname
              var giftName = item.gift_name
              _this.comingTxt.push('恭喜' + nickname + '接力成功！加入变美之旅')
              _this.joyTxt.push(
                '<span class="joy">恭喜</span><span class="joy-name">' +
                  _this.decodeData(nickname) +
                  '</span><span class="joy-gift">已领取' +
                  giftName +
                  '</span>'
              )
            })
            _this.$nextTick(function() {
              _this.comingTxtSwiper()
            })
            _this.$nextTick(function() {
              _this.joySwiper()
            })
          }
        },
        'json'
      )
    },

    methods: {
      comingTxtSwiper() {
        var comingSwiper = new Swiper('#top-msg', {
          // autoHeight: true,
          loop: true,
          autoplay: true,
          delay: 3500
        })
      },
      giftBagSwiper() {
        var giftSwiper = new Swiper('#gift-bag', {
          // autoHeight: true,
          // autoplay: true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        })
      },
      joySwiper() {
        var joyMsgSwiper = new Swiper('#joy-msg', {
          direction: 'vertical',
          // autoHeight: true,
          autoplay: true,
          delay: 5000,
          on: {
            init: function() {}
          }
        })
      },
      getGift(bag, $event) {
        var _this = this
        if (bag) {
          $.post(
            apiList.setUserGift,
            {
              gift_id: bag.id,
              gift_name: bag.name
            },
            function(resp) {
              console.log('​getGift -> resp', resp)
              if (resp && resp.errcode == 0) {
                _this.showDialogGift = true
                if (_this.haveTeacher) {
                  _this.giftTips =
                    '赶快去找你的专属美肤老师<span>' +
                    _this.hplTeacher +
                    '</span>咨询吧~'
                } else {
                  _this.giftTips = giftTipsNew
                }
                console.log($event)
                // 点击领取后按钮改变颜色，1=已领取，0=未领取
                bag.is_own = 1
                console.log(_this.clickSwitchClass)
                // _this.$nextTick()
              } else {
                weui.alert(resp.msg)
                console.log(resp)
              }
            },
            'json'
          )
        }
      },
      dialogGift() {
        this.showDialogGift = true
      },
      closeDialog() {
        this.showDialogGift = false
        this.dialogConsult = false
      },
      consult() {
        this.dialogConsult = true
      },
      decodeData(data) {
        if (typeof data === 'string') {
          return JSON.parse('"' + data + '"')
        }
      }
    },
    mounted() {
      console.log(this.comingTxt)
      this.giftBagSwiper()
    }
  }
</script>
<style lang="less" scoped>
  * {
    padding: 0;
    margin: 0;
  }
  img {
    border: 0;
    outline: 0;
    vertical-align: middle;
  }
  .block {
    width: 100%;
    min-width: 20rem;
    max-width: 46.875rem;
    margin: 0 auto;
    position: relative;
  }
  .block .bgimg {
    width: 100%;
  }

  .coming-txt {
    position: absolute;
    width: 100%;
    top: 90%;
    height: 3.25rem;
    overflow: hidden;
    z-index: 9;
    text-align: center;
    background-color: rgba(235, 203, 207, 0.6);
  }
  #top-msg {
    width: 100%;
    height: 100%;
  }
  #top-msg .swiper-slide {
    width: 100%;
    height: 100%;
  }
  #top-msg .p-msg {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #af011d;
    font-size: 1.625rem;
    font-weight: 600;
  }
  .have-join-num {
    position: absolute;
    top: 31%;
    width: 100%;
    text-align: center;
    z-index: 9;
  }
  .have-join-num .img-have {
    width: 5rem;
  }
  .have-join-num .img-people {
    width: 2rem;
  }
  .have-join-num .img-join {
    width: 10rem;
  }
  .have-join-num .have-join {
    font-size: 30px;
    color: #fff;
  }
  .bag {
    position: absolute;
    width: 100%;
    top: -22%;
    z-index: 9;
  }
  .bag .gift-box {
    padding: 0 6.6%;
  }
  .bag .img-bag {
    width: 100%;
  }
  .bag .swiper-button-prev,
  .swiper-container-rtl .swiper-button-next {
    background-image: url(http://sucai.suoluomei.cn/sucai_zs/images/20181130/508d4ced086aff24ec70ffed162aa5b4.png);
  }
  .bag .swiper-button-next,
  .swiper-container-rtl .swiper-button-prev {
    background-image: url(http://sucai.suoluomei.cn/sucai_zs/images/20181130/3e575726862abf4b2d4f173c69ab43c5.png);
  }
  .joy-msg {
    position: absolute;
    top: -22%;
    width: 100%;
    height: 37.6%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 12.6%;
    overflow: hidden;
    z-index: 9;
  }
  .joy-msg .p-msg {
    height: 4.33rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .joy-msg p {
    color: #fff;
    font-size: 16px;
  }
  .joy-msg p .joy {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
  }
  .joy-msg p .joy-name {
    -webkit-box-flex: 3;
    -ms-flex: 3;
    flex: 3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .joy-msg p .joy-gift {
    -webkit-box-flex: 6;
    -ms-flex: 6;
    flex: 6;
    text-align: right;
  }
  .btn-get {
    position: absolute;
    width: 100%;
    z-index: 11;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
  }
  .gift-box .btn-get-gift {
    width: 13.8875rem;
    height: 3.025rem;
    outline: 0;
    border: 0;
    background-color: #ffa734;
    color: #fff;
    border-radius: 1.625rem;
    font-weight: 600;
    font-size: 2.2rem;
    letter-spacing: 0.5rem;
  }
  .dialog-gift {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 22;
    width: 100%;
  }

  .dialog-gift .bg-dialog {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 20;
  }
  .dialog-gift .close {
    height: 3rem;
    position: absolute;
    top: 33%;
    left: 69%;
    border-radius: inherit;
  }
  .dialog-box {
    position: relative;
    width: 100vw;
    height: 100vh;
  }
  .dialog-box .dialog-tips {
    position: absolute;
    top: 57%;
    z-index: 26;
    font-size: 1.6rem;
    color: #b98531;
    width: 100%;
    text-align: center;
  }
  .dialog-gift img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    z-index: 23;
  }
  .dialog-gift a {
    width: 4rem;
    height: 4rem;
    display: inline-block;
    position: absolute;
    bottom: 13.3%;
    left: 45.5%;
    z-index: 24;
    border-radius: 4rem;
  }
  [v-cloak] {
    display: none;
  }
  .gift-box .haveGetGift {
    background-color: #a9a9a9;
  }
  .btn-consult-box {
    position: absolute;
    bottom: 59%;
    z-index: 9;
    width: 100%;
    text-align: center;
  }
  .btn-consult-box .btn-consult {
    width: 16.8875rem;
    height: 4.025rem;
    line-height: 4.025rem;
    outline: 0;
    border: 0;
    background-color: #ffa734;
    color: #fff;
    border-radius: 2.625rem;
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: 0.5rem;
  }
  .dialog-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .dialog-content img {
    position: absolute;
    z-index: 22;
    width: 30rem;
    height: 30rem;
  }
  /* iphoneX 媒体查询响应 */
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .dialog-gift a {
      width: 5.2rem;
      height: 5.2rem;
      border-radius: 5.2rem;
      bottom: 16.8%;
      left: 44%;
    }
    .dialog-box .dialog-tips {
    }
    .dialog-gift .close {
    }
  }
  @media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
  }
</style>
